<template>
    <div id="specification">
        <el-form :inline="true" :model="query" size="mini">
            <el-form-item label="规格名称：">
                <el-input v-model.trim="query.gsname"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
                <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
                <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addgood">添加</el-button>

            </el-form-item>
        </el-form>
        <!--表格-->
        <template>
            <el-table
                    :data="FromData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="序号"
                >
                </el-table-column>
                <el-table-column
                        prop="gsname"
                        label="规格名称"
                >
                </el-table-column>

                <el-table-column
                        prop="gmtCreate"
                        label="创建时间"
                >
                </el-table-column>
                <el-table-column
                        prop="gmtModified"
                        label="更新时间"
                >
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="400">
                    <template slot-scope="scope">
                            <el-button  type="success" @click="editName(scope.row)" size="mini">编辑</el-button>
                        <el-button  type="danger" @click="del(scope.row.id)" size="small" >删除</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <!--添加-->
            <el-dialog
                    title="添加"
                    :visible.sync="addDialogVisible"
                    width="30%"
            >
                <!--添加的表单的数据绑定-->
                <el-form :model="addSubjectFormData" :rules="addSubjectFormRule"  ref="addSubjectFormRef"  label-width="100px" class="demo-ruleForm">
                    <el-form-item label="规格名称:" prop="gsname">
                        <el-input type="text" v-model="addSubjectFormData.gsname" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addgoods('addSubjectFormRule2')">确 定</el-button>
            </span>
            </el-dialog>
<!--            编辑-->
            <el-dialog
                    title="修改规格"
                    :visible.sync="editCpuDialogVisible"
                    width="30%"
            >
                <el-form label-width="100px" :model="editForm" :rules="addSubjectFormRule" ref="editSubjectFormRule" >
                    <el-form-item label="规格名称" prop="gsname">
                        <el-input v-model="editForm.gsname"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editCpuDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editgsForm">确 定</el-button>
                </span>
            </el-dialog>
        </template>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "specification",
        data(){
            return{
                query:{},
                FromData:[],

                editCpuDialogVisible:false,
                //编辑商品信息的对象
                editForm:{},
                //添加
                addDialogVisible:false,
                addSubjectFormData:{
                    gsname:"",
                },
                //当前页数
                currentPage:1,
                pageSizes:[5,10,15,20],
                //每页显示的条数
                pageSize:5,
                //总条数
                total:0,
                //添加框的表单验证
                addSubjectFormRule:{
                    gsname:[
                        {required:true,message:"内容不能为空",trigger:"blur"}
                    ]
                },
            }
        },
        created() {
            this.tFromData();
        },
        methods: {
            //初始页面分页
            tFromData() {
                this.$http.post("/goods/goodsSpecification/selectAll/"+this.currentPage+"/"+this.pageSize,this.query).then(resule => {
                    console.log(resule)
                    this.FromData = resule.data.data.records
                    this.total=resule.data.data.total

                })
            },
            //添加
            addgood(){
               this.addDialogVisible=true
            },
            addgoods(){
                this.$refs["addSubjectFormRef"].validate((valid) => {
                    if (valid) {
                        var that = this
                        this.addDialogVisible = false;
                        this.$http.post(`/goods/goodsSpecification/insertGoods`, this.addSubjectFormData).then(function (resp) {
                            //重新加载表格数据
                            that.tFromData();
                            that.$message.success(resp.data.msg)
                        })
                    }
                })
            },
            //  编辑商品类型信息
            editName(row) {
                this.editCpuDialogVisible = true;
                this.editForm = row;
            },
            //确认修改
            editgsForm() {
                this.$refs['editSubjectFormRule'].validate((valid) => {
                    if (valid) {
                        var that = this
                        this.$http.post("/goods/goodsSpecification/updateGoodsBrand", this.editForm).then(resule => {
                            //隐藏编辑弹出层
                            this.editCpuDialogVisible = false;
                            //重新加载表格数据
                            that.tFromData();
                            that.$message.success(resule.data.msg)
                        })
                    }
                    })
            },
            //删除
            del(id){
                if (confirm("确定删除吗")) {
                    //console.log(id);
                    this.$http.post("/goods/goodsSpecification/delectGoodsBrand/"+id).then(resule => {
                        this.tFromData();
                        this.$message.success(resule.data.msg)
                    })
                }
            },
            // 查询条件
            handleCheck() {
                this.tFromData();
            },
            //每页显示的条数发生改变时触发
            handleSizeChange(val) {
                this.pageSize=val;
                this.tFromData();
            },
            //当前页码发生改变时触发
            handleCurrentChange(val) {
                this.currentPage=val;
                this.tFromData();
            },
            //重置
            handleReset(){
                location.href="/goods/goodsSpecification/selectAll"
            },
        }
    }
</script>

<style scoped>

</style>